<template>
  <el-dialog title="管理缩略语" :visible.sync="dialogVisible" :before-close="handleClose" fullscreen>
    <div class="input-row">
      <el-form :inline="true" :model="formInline" @submit.native.prevent>
        <el-form-item label="缩略语中文">
          <el-input size="small" clearable v-model="formInline.nameZh" @keyup.native.enter="handleFilter" />
        </el-form-item>
        <el-form-item label="缩略语英文">
          <el-input size="small" clearable v-model="formInline.nameEn" @keyup.native.enter="handleFilter" />
        </el-form-item>
        <el-form-item label="缩略词">
          <el-input size="small" clearable v-model="formInline.nameShort" @keyup.native.enter="handleFilter" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter" size="mini">查询</el-button>
          <el-button @click="resetQuery" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrapper">
      <div class="half left">
        <div class="ins-table-cap">缩略语库</div>
        <el-table :data="tableData" class="ins-table" height="calc(100vh - 220px)" empty-text="无被检索缩略语">
          <el-table-column prop="nameShort" label="缩略语" width="70"> </el-table-column>
          <el-table-column prop="nameEn" label="英文全称"> </el-table-column>
          <el-table-column prop="description" label="中文释义" width="200"> </el-table-column>
          <el-table-column prop="typeName" label="缩略语类型" width="90"> </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="text" size="mini" :disabled="getDisabled(scope.row)" @click="insert(scope.row)"
                >插入</el-button
              ></template
            >
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="total"
          layout="prev, pager, next"
          :page-size="10"
          :total="total"
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>

      <div class="center"></div>

      <div class="half right">
        <div class="ins-table-cap">已插入缩略语</div>
        <el-table :data="list" class="ins-table" height="calc(100vh - 220px)">
          <el-table-column prop="nameShort" label="缩略语" width="150"> </el-table-column>
          <el-table-column prop="nameEn" label="英文全称" width="150"> </el-table-column>
          <el-table-column prop="description" label="中文释义" width="200"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="remove(list, scope.$index)">删除</el-button></template
            >
          </el-table-column>
        </el-table>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { v4 as uuid } from 'uuid'
import { getAbbrListApi } from '@/api'
import { remove } from '@/utils/helpers'
import { cloneDeep } from 'lodash'

export default {
  name: 'InsertAbbrDialog',
  data() {
    return {
      total: 0,
      currentPage: 1,
      tableData: [],
      formInline: {
        standardName: undefined,
        nameZh: undefined,
        nameEn: undefined,
        nameShort: undefined
      },
      list: [],
      dialogVisible: false
    }
  },
  methods: {
    resetQuery() {
      this.currentPage = 1
      this.formInline = {
        standardName: undefined,
        nameZh: undefined,
        nameEn: undefined,
        nameShort: undefined
      }
      this.handleFilter()
    },
    show() {
      this.resetQuery()
      this.dialogVisible = true
      this.list = cloneDeep(this.$store.state.xmleditor.abbrTableData?.abbrData || [])
    },
    remove,
    getDisabled(row) {
      return !!this.list.find((i) => i?.id == row.id)
    },
    async handleFilter(e) {
      if (e) {
        this.currentPage = 1
      }
      const data = { ...this.formInline, pageSize: 10, pageNum: this.currentPage }
      data.status = 1
      const { count, list, pageNum } = await getAbbrListApi(data)
      this.total = count
      this.tableData = list
      this.currentPage = pageNum
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.handleFilter()
    },
    async handleConfirm() {
      this.$store.commit('xmleditor/SET_ABBR_BLOCK_LIST', this.list)
      this.$store.commit('xmleditor/UPDATE_ABBRS')
      this.handleClose()
    },
    insert(row) {
      const { description, nameShort, nameEn, id } = row
      this.list.push({
        dataId: uuid(),
        id,
        description,
        nameShort,
        nameEn
      })
      this.list = this.list.sort((a, b) => a.nameShort.localeCompare(b.nameShort))
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.wrapper {
  display: flex;
}
.ins-table {
  width: 100%;
}
::v-deep .el-dialog {
  min-width: 800px;
}
::v-deep .el-dialog__body {
  padding-top: 0;
  padding-bottom: 10px;
}
::v-deep .el-dialog__footer {
  padding: 0 20px 10px;
}
::v-deep .el-table .el-table__cell form {
  margin-left: 80px;
}
::v-deep .el-table .el-table__cell form > div {
  margin-bottom: 0;
}
::v-deep .el-table .el-table__cell form > div > label {
  font-weight: bold;
}
.half {
  width: 49.5%;
}
.center {
  border: 1px solid #ccc;
  height: calc(70vh);
  margin: auto 10px;
}
.row {
  display: flex;
}
.row > div {
  padding: 0 1px;
  margin-bottom: 0;
}
.row > div:nth-child(3),
.row > div:nth-child(4) {
  flex-grow: 1;
}
.row > div:nth-child(1),
.row > div:nth-child(2),
.row > div:nth-child(5),
.row > div:nth-child(6),
.row > div:last-child {
  width: 200px;
}
</style>
